<template>
  <div class="wordOrder-content">
    <div class="wordOrder-title">
      CSP助手为您找到与 “{{ workParams.title }}” 相关以下{{ visible }}:
    </div>

    <!-- 工单 -->
    <template v-if="workParams.type === 'workOrder'">
      <template v-for="(item, index) in wordList" :key="index">
        <div class="tickets-item tickets-item-title" @click="goToWorkOrderItem('workOrder', item.ticket_number)">
          ☐
          <span v-dompurify-html="item.title"></span>
        </div>
        <div class="tickets-item tickets-text">
          <span v-dompurify-html="item.content"></span>
        </div>

        <div v-for="(i, index) in item?.sub_items" :key="index" class="tickets-item"
          style="padding-bottom: 10px; padding-left: 35px; line-height: 18px">
          ○
          <template v-if="i.title"> <span v-dompurify-html="i.title"></span>： </template>

          <span v-dompurify-html="i.content"></span>
        </div>
      </template>
    </template>

    <!-- 资料 -->
    <!-- <template v-else-if="workParams.type === 'document'">
        <template v-for="(item, index) in wordList" :key="index">
          <div class="tickets-item-title information-title"
            @click="goToWorkOrderItem('document', item.id, item.template_id)">
            ☐
            <span v-dompurify-html="item.title"> </span>
          </div>

          <template v-for="(i, index) in item?.sub_items" :key="index">
            <div v-if="i.keyword.length" class="tickets-item" style="padding-bottom: 10px; padding-left: 35px">
              ○ <template v-if="i.title"> <span v-dompurify-html="i.title"></span>： </template>
              <span v-for="(k, index) in i.keyword" :key="index" v-dompurify-html="k" style="
                      background: #ebb;
                      padding: 3px;
                      box-sizing: border-box;
                      border-radius: 3px;
                      margin-left: 10px;
                    "></span>
            </div>

            <div v-else style="padding: 0 0 10px 35px" class="tickets-item">
              ○ <template v-if="i.title"> <span v-dompurify-html="i.title"></span>： </template>
              <span v-dompurify-html="i.content"></span>
            </div>

            <div v-if="i.keyword.length" class="tickets-item" style="padding-bottom: 10px" v-dompurify-html="i.content">
            </div>
          </template>
        </template>
      </template> -->

    <!-- 视频 -->
    <!-- <template v-else>
        <template v-for="(item, index) in wordList" :key="index">
          <div class="tickets-item tickets-item-title" @click="goToWorkOrderItem('video', item.id)">
            ☐
            <template v-if="item.title"> <span v-dompurify-html="item.title"> </span></template>
            <span v-for="(i, index) in item?.keyword" :key="index" v-dompurify-html="i" style="
                    background: #ebb;
                    padding: 3px;
                    box-sizing: border-box;
                    border-radius: 3px;
                    margin-left: 10px;
                  "></span>
          </div>
          <div class="tickets-item tickets-text">
            <span v-dompurify-html="item.content"> </span>
          </div>

          <div v-for="(i, index) in item?.sub_items" :key="index" class="tickets-item"
            style="padding-bottom: 10px; padding-left: 35px">
            ○
            <template v-if="i.title"> <span v-dompurify-html="i.title"></span>： </template>

            <span v-dompurify-html="i.content"></span>
          </div>
        </template>
      </template> -->
  </div>
</template>
<script setup lang="ts">
import { useRouter } from 'vue-router'

const props = defineProps<{
  workParams: { title: string; type: string }
  wordList: any
}>()

const visible = computed(() => {
  return props.workParams.type === 'workOrder'
    ? '工单'
    : props.workParams.type === 'document'
      ? '资料'
      : '视频'
})

const router = useRouter()

// 工单内容跳转
const goToWorkOrderItem = (i: string, id: number, file_id?: number) => {
  // i workOrder:工单  document:资料 video:视频  type:资料类型

  let path = ''

  let paramsList: { id: null | number; material_id: number | null } = {
    id: null,
    material_id: null,
  }

  if (i === 'workOrder') {
    paramsList.id = id

    //删除对象中某个属性
    Reflect.deleteProperty(paramsList, 'material_id')

    path = '/work-order-detail'
  }
  // else if (i === 'document') {
  //   paramsList.id = file_id as number

  //   paramsList.material_id = id

  //   path = '/menu/information'
  // } else {
  //   paramsList.id = id

  //   //删除对象中某个属性
  //   Reflect.deleteProperty(paramsList, 'material_id')

  //   path = '/menu/video'
  // }

  router.push({
    path: path,
    query: { ...paramsList }
  })
}
</script>
<style scoped lang="scss">
.wordOrder-content {

  .wordOrder-title {
    text-align: center;
    margin: 0 0 30px 0;
    font-size: 14px;
    font-weight: 600;
  }

  .wordOrder-text {
    span {
      font-size: 16px;
      font-weight: 600;
      color: #2d33dd;
      border-bottom: 1px solid #2d33dd;
      cursor: pointer;
    }
  }

  .wordOrder-cont {
    width: 100%;
    line-height: 20px;
    font-weight: 600;
    margin: 10px 0 30px 0;
    overflow: hidden;
    word-wrap: break-word;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
}

.tickets-item {
  padding-left: 25px;
}

.tickets-item-title span:first-child {
  color: #2d33dd;
  border-bottom: 1px solid #2d33dd;
  cursor: pointer;
}

.information-title {
  padding: 0 0 15px 25px;
}

.tickets-text {
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 50px;
  line-height: 20px;
}
</style>

<style>
.wordOrder-content em {
  color: #bf1920 !important;
  font-style: normal;
}
</style>